<!DOCTYPE html>
<!-- saved from url=(0033)http://127.0.0.1:5000/user/itcast -->
<html lang="zh" xmlns="http://www.w3.org/1999/html"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>爱租屋</title>

    <link rel="icon" href="../static/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="../static/img/favicon.ico" type="image/x-icon">
    <!-- Bootstrap core CSS -->
    <link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template -->
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../static/css/clean-blog.css" rel="stylesheet">
    <!-- Beautiful css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>

        #mainNav {
            border-bottom: 1px solid #ecf0f1;
            background: transparent;
        }

        #mainNav .navbar-brand {
            padding: 10px 20px;
            color: #343a40;
        }

        #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
            color: #0085A1;
        }

        #mainNav .navbar-nav > li.nav-item > a {
            padding: 10px 20px;
            color: #343a40;
        }

        #mainNav .navbar-nav > li.nav-item > a:focus, #mainNav .navbar-nav > li.nav-item > a:hover {
            color: #0085A1;

        }

        header.masthead {
            margin-bottom: 50px;
            background: no-repeat center center;
            background-color: #fff;
            background-attachment: scroll;
            position: relative;
            background-size: cover;
        }

        header.masthead .overlay {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: #fff;
            opacity: 0.5;
        }

        /**/
        .no-margin-bottom {
            margin-bottom: 0 !important;
        }

        .detail-body {
            background: #fff;
            margin-top: 100px;
            margin-bottom: 50px;

        }

        .user-info {
            font-size: 16px;
            color: #394043;
            font-weight: 300;
            line-height: 25px;
            text-align: justify;
            border-bottom: #ecf0f1 1px solid;
            padding: 10px;
            margin: 20px 20px 10px 5px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }

        .c-1 {
            padding: 1px 10px 2px 20px;
            margin: 0 0 12px 0;
            background-color: #ecf0f1;
        }

        .c-1 span {
            line-height: 30px;
        }

        /* editor button */
        .c-2 {
            margin: 0 0 12px 0;
            border-radius: 1px;
            font-size: 13px;
        }

        input {
            font-size: 12px;
            padding-left: 8px;
            height: 28px;
            width: 350px;
        }

        .course {
            margin-top: 10px;
            padding: 7px 5px 0 5px;
            background: #fff;
        }

        .course-info {
            height: 30px;
            font-weight: 500;
            color: #333;
            font-size: 16px;
        }

        .course-info1 {
            height: 20px;
            font-weight: 300;
            font-size: 12px;
        }

        .course-info span {
            line-height: 37px;
        }

        .price {
            color: #e74c3c;
            font-size: 14px;
        }

        /* change-chanle */
        .nav-tabs > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
            font-size: 14px;
            margin-right: 2px;
            line-height: 1.42857143;
            border-radius: 4px 4px 0 0;
            text-decoration: none;
            border-top: 1px solid #ddd;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }

        .nav-tabs > li > a:focus, .nav-tabs > li > a:hover {
            color: #555;
            cursor: default;
            background-color: #eee;
            text-decoration: none
        }

        /* chanle */
        /*
        针对被百度地图CSS污染的卡片图片，强制将其 position 恢复正常。
        */
        #my-house-collection .card img {
            position: relative; 
        }
        .collection {
            display: none;
            overflow: scroll;
            height: 650px;
        }

        .collection-line {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            padding: 10px;
            margin: 20px 20px 20px 5px;
            background: #fff;
            border-bottom: #ecf0f1 1px solid;
        }

        .collection-line-info {
            font-size: 14px;

        }

        .collection-line-info div {
            height: 31px;

        }

        .collection-line-info .attribute-text {
            font-weight: 400;
            color: #57606f;
            letter-spacing: 0.2px;
        }

        .collection-line-info .info-text {
            font-weight: 400;
            color: #333;
            letter-spacing: 0.2px;
        }

        /* more */
        .info-more {
            text-align: center;
        }

        .info-more a {
            font-weight: 400;
            color: #3498db;
            font-size: 14px;
            text-decoration: none;
        }

        .info-more i {
            padding: 65px 30px 65px 50px;
            position: relative;
        }

        .info-more i:hover, .info-more i:focus {
            color: #e74c3c;
            opacity: 0;
            animation: fadeIn 0.5s infinite linear alternate-reverse;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }to {
                opacity: 1;
            }
        }

        /* browse-record */
        .browse-record {
            padding-bottom: 15px;
            /*box-shadow: -5px 0 10px -2px rgba(236, 236, 236, 0.86);*/
        }

        .browse-record-first-div {
            padding-bottom: 10px;

        }

        #user {
            position: relative;
        }

        #user input {
            width: 65px;
            height: 30px;
            position: absolute;
            top: 23px;
            left: 21px;
            display: none;
            outline: none;
        }

        #user input:hover {
            cursor: pointer;
        }

        #collect {
            position: relative;
        }

        #collect .collect_off {
            position: absolute;
            top: 5px;
            right: 25px;
            font-size: 12px;
            font-weight: 200;
        }

        #collect .collect_off:hover {
            cursor: pointer;
            color: red;
        }

        .del-btn {
            text-align: right;
            font-size: 13px;
            font-weight: 300;
        }

        #del {
            margin-right: 10px;
        }

        #del:hover {
            cursor: pointer;
            color: red;
        }

        .upload-house {
            display: none;
            margin-top: 20px;
            padding: 20px;
            background: #fff;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            font-size: 16px;
            color: #394043;
            font-weight: 300;
        }

        .my-house {
            display: none;
            margin-top: 20px;
            padding: 20px;
            background: #fff;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            color: #394043;
        }

        /* 百度地图 */
        .map_form .modal-dialog {
            max-width: 1200px;
            width: 90%;
            margin: auto;
        }

        .map_form .modal-content {
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        .map_form .modal-body {
            padding: 0;
        }

        .map_form .modal-title {
            background: white;
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .map_form .m-header {
            background: white;
            padding: 10px 15px;
            display: flex;
            justify-content: flex-end;
            border-bottom: 1px solid #eee;
        }

        #map-container {
            overflow: hidden;
            height: 565px;
            width: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        /* 显示租借状态的角标 */
        /* 状态角标的通用样式 */
        .status-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 10;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* "未租" 角标的样式 (绿色) */
        .status-badge-available {
            background-color: #28a745;
        }

        /* "已租" 角标的样式 (红色或灰色) */
        .status-badge-rented {
            background-color: #dc3545; /* Bootstrap danger red */
        }

        /* 下拉菜单容器 */
        .dropdown {
            position: relative;
            margin-left: 20px;
        }

        /* 下拉触发按钮 */
        .dropdown-toggle {
            display: flex;
            align-items: center;
            padding: 8px 20px;
            border-radius: 25px;
            transition: all 0.3s ease;
            background: #f8f9fa;
            color: #2c3e50;
            font-weight: 500;
            text-decoration: none !important;
        }

        /* 鼠标悬停效果 */
        .dropdown-toggle:hover {
            background: #3498db;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        /* 下拉菜单本体 */
        .dropdown-menu {
            min-width: 200px;
            border: none !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 10px 0;
            margin-top: 10px !important;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: block;
            visibility: hidden;
        }

        /* 显示时的动画 */
        .show .dropdown-menu {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }

        /* 菜单项样式 */
        .dropdown-item {
            padding: 12px 25px;
            font-size: 14px;
            color: #34495e;
            transition: all 0.2s ease;
            position: relative;
            display: flex;
            align-items: center;
        }

        /* 菜单项悬停效果 */
        .dropdown-item:hover {
            background: #f8f9fa;
            color: #3498db;
            padding-left: 30px;
        }

        /* 菜单项前的装饰线 */
        .dropdown-item:before {
            content: '';
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            height: 0;
            width: 3px;
            background: #3498db;
            transition: all 0.3s ease;
        }

        .dropdown-item:hover:before {
            height: 60%;
        }

        /* 分割线样式 */
        .dropdown-divider {
            margin: 8px 0;
            border-color: #ecf0f1;
        }

        /* 当前用户名显示 */
        .dropdown-toggle::after {
            content: "\f007"; /* Font Awesome 用户图标 */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin-left: 8px;
            border: none !important;
            vertical-align: middle;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .dropdown-menu {
                position: fixed !important;
                left: 50% !important;
                transform: translateX(-50%) translateY(10px) !important;
                width: 80%;
            }

            .show .dropdown-menu {
                transform: translateX(-50%) translateY(0) !important;
            }
        }
    </style>

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="http://127.0.0.1:5000/">爱租屋</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse " id="navbarResponsive">

            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="http://127.0.0.1:5000/">首页</a>
                </li>


                {% if request.cookies.get('is_logged_in') == 'true' %}
                    <li class="nav-item" id="user">
                    <!-- 登录状态显示用户菜单 -->
                        <a class="nav-link" href="#">{{ request.cookies.get('username') }}</a>
                    </li>
                    <li class="nav-item" id="user">
                        <a class="nav-link" href="/user/{{ request.cookies.get('username') }}">个人中心</a>
                    </li>
                    <li class="nav-item" id="user">
                        <a class="nav-link" href="/logout">注销</a>
                    </li>
                {% else %}
                    <li class="nav-item" id="user">
                        <!-- 未登录显示登录按钮 -->
                        <a class="nav-link" data-toggle="modal" data-target="#login" href="#">
                            <i class="fas fa-sign-in-alt"></i> 登录
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

<!-- Page Header -->
<header class="masthead no-margin-bottom" style="background-color: #fff; min-height: 500px">
    <div class="overlay"></div>
    <div class="container">
        <div class="row ">
            <div class="col-lg-8 col-md-8 mx-auto detail-body">
                <ul class="nav nav-tabs" style="margin:10px 0 30px">
                    <li class="active chanle1"><a href="#userinfo">账号信息</a></li>
                    <li class="chanle2"><a href="#collections">房源收藏</a></li>
                    <li class="chanle3"><a href="#upload-house">上传房源</a></li>
                    <li class="chanle4"><a href="#my-house">我的房源</a></li>
                    <li class="chanle5"><a href="#mt-rent">我的租借</a></li>
                </ul>
                <!--账号信息-->
                <div class="user-info">
                    <input value="{{ user.name }}" id="n-data" style="display: none">
                    <div class="row">
                        <div class="col-lg-8 c-1">
                            <span>昵称：</span>
                            <span class="nkname">{{ user.name }}</span>
                        </div>
                        <div class="col-lg-4">
                                <button class="btn-info c-2 disabled" id="btn-name" disabled>
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"> 编辑</i>
                                </button>
                        </div>
                    </div>

                    <input value="{{ user.addr }}" id="a-data" style="display: none">
                    <div class="row">
                        <div class="col-lg-8 c-1">
                            <span>住址：</span>
                            <span class="nkaddr">{{ user.addr }}</span>
                        </div>
                        <div class="col-lg-4">
                            <button class="btn-info c-2" id="btn-addr"><i class="fa fa-pencil-square-o" aria-hidden="true"> 编辑</i>
                            </button>
                        </div>
                    </div>

                    <input value="{{ user.password }}" id="p-data" style="display: none">
                    <div class="row">
                        <div class="col-lg-8 c-1">
                            <span>密码：</span>
                            <span class="nkpd">************</span>
                        </div>
                        <div class="col-lg-4">
                            <button class="btn-info c-2" id="btn-pd"><i class="fa fa-pencil-square-o" aria-hidden="true"> 编辑</i>
                            </button>
                        </div>
                    </div>

                    <input value="{{ user.email }}" id="e-data" style="display: none">
                    <div class="row">
                        <div class="col-lg-8 c-1">
                            <span>邮箱：</span>
                            <span class="nkemail">{{ user.email }}</span>
                        </div>
                        <div class="col-lg-4">
                            <button class="btn-info c-2" id="btn-email"><i class="fa fa-pencil-square-o" aria-hidden="true"> 编辑</i>
                            </button>
                        </div>
                    </div>
                </div>
                <!--收藏-->
                    <div class="collection" id="my-house-collection">
                    {% if collect_house_list %}
                        <div class="row-cols-2 g-1">
                            {% for house in collect_house_list %}
                            <div class="col">
                                <div class="collection-line card shadow rounded-3">
                                    <a href="/house/{{ house.id }}" class="text-decoration-none text-dark">
                                        <!-- 房源图片 -->
                                        <div class="position-relative d-flex justify-content-center">
                                            <img src="/static/img/house-bg2.jpeg"
                                                 class="img-fluid rounded-top-3"
                                                 alt="房源图片"
                                                 width="480"
                                                 height="270">
                                        </div>
                                    </a>
                                        <!-- 房源信息 -->
                                        <div class="card-body p-4">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="glyphicon glyphicon-map-marker text-primary fs-5 me-2"></span>
                                                <h5 class="mb-0">{{ house.title[:30] + '...' if house.title|length > 30 else house.title }}</h5>
                                            </div>

                                            <div class="course-info1 text-muted">
                                                <div class="mb-1">{{ house.address }}</div>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span class="price mb-1">￥{{ house.price }}/月</span>

                                                    <button class="collect_off btn btn-xs btn-danger px-2 py-1" data-house-id="{{ house.id }}">
                                                        取消收藏
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="collection-line text-center py-5">
                            <h4 class="text-muted">你还没有收藏任何房源</h4>
                            <p class="fs-6">浏览房源时点击“收藏”按钮即可添加到这里</p>
                        </div>
                    {% endif %}
                </div>

                <!--上传房源-->
                <div class="upload-house">
                    <h3 style="width: 100%; text-align: center;" >上传房源信息</h3>
                    <form class="form-group" id="house-upload-form" action="/upload_house" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="house_id">
                        <div class="form-group">
                          <label>房源标题 *</label>
                          <input type="text" class="form-control" name="title" id="" required>
                        </div>
                        <div class="form-group">
                            <label>户型 *</label>
                            <input type="text" class="form-control" name="rooms" required>
                        </div>
                        <div class="form-group">
                            <label>面积（㎡）*</label>
                            <input type="text" class="form-control" name="area" required>
                          </div>
                        <div class="form-group">
                            <label>价格（元/月）*</label>
                            <input type="text" class="form-control" name="price" required>
                        </div>
                        <div class="form-group">
                            <label>朝向 *</label>
                            <input type="text" class="form-control" name="direction" required>
                        </div>
                        <div class="form-group">
                            <label>租住类型 *</label>
                            <input type="text" class="form-control" name="rent_type" required>
                        </div>
                        <div class="form-group">
                            <a class="nav-link" data-toggle="modal" data-target="#map" href="#" onclick="loadMap()">
                                <i class="fas fa-map-marker-alt"></i> 获取位置
                            </a>
                        </div>
                        <div class="form-group">
                            <label>房源所在区 *</label>
                            <input id="region" type="text" class="form-control" name="region" required>
                        </div>
                        <div class="form-group">
                            <label>房源所在街道 *</label>
                            <input id="block" type="text" class="form-control" name="block" required>
                        </div>
                        <div class="form-group">
                            <label>房源所在小区 *</label>
                            <input id="address" type="text" class="form-control" name="address" required>
                        </div>
                        <div class="form-group">
                            <label>交通条件 *</label>
                            <input type="text" class="form-control" name="traffic" required>
                        </div>
                        <div class="form-group">
                            <label>配套设施</label>
                            <textarea class="form-control" name="facilities" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label>房屋优势</label>
                            <textarea class="form-control" name="highlights" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label>周边</label>
                            <textarea class="form-control" name="matching" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label>公交出行</label>
                            <textarea class="form-control" name="travel" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label>房东电话 *</label>
                            <input type="text" class="form-control" name="phone_num" required>
                        </div>

                        <!-- 图片上传 -->
                        <!--
                        <div class="form-group">
                          <label>房源封面图 *</label>
                          <input type="file" class="form-control" name="image" accept="image/*" required>
                          <small class="form-text text-muted">支持格式：jpg/png，大小不超过5MB</small>
                        </div> -->

                        <div class="text-center mt-4">
                          <button type="submit" class="btn btn-primary">立即发布</button>
                        </div>
                      </form>
                </div>
                <!--我的房源-->
                <div class="my-house">

                </div>

                <div class="my-rent">

                </div>
            </div>


            <!--浏览记录-->
            <div class="col-lg-4 col-md-4 mx-auto detail-body">
                <div class="row browse-record">
                    <div class="col-lg-10 col-md-10 mx-auto">
                        <h3 style="margin:20px 0 15px">浏览记录</h3>

                    </div>
                    <div class="col-lg-10 col-md-10 mx-auto del-btn">
                        <span id="del">清空浏览记录</span>
                    </div>
                    <div style="overflow: scroll; height:680px;">

                        {% for seen_house in seen_house_list %}
                        <div class="col-lg-10 col-md-10 mx-auto browse-record-first-div">
                            <div class="course">
                                <div><a href="http://127.0.0.1:5000/house/{{ seen_house.id }}"><img class="img-fluid img-box" src="../static/img/house-bg2.jpeg" alt=""></a>
                                </div>
                                <div class="course-info">
                                    <span class="glyphicon glyphicon-map-marker"></span>
                                    <span>{{ seen_house.address }}</span>
                                </div>
                                <div class="course-info1">
                                    <span>{{ seen_house.rooms }}-{{ seen_house.area }}</span>
                                    <span class="price">￥{{seen_house.price}}&nbsp;</span>
                                </div>
                            </div>
                        </div>
                       {% endfor %}


                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--    租借记录-->
    <div class="collection">
    </div>
</header>
<div id="map" class="modal fade map_form" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body m-header">
                <button class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">地图</h1>
            </div>
            <div class="modal-body">
                <div id="map-container"></div>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <!-- <p class="copyright text-muted">Copyright © 二手好房 2019</p> -->
            </div>
        </div>
    </div>
</footer>

<!-- Bootstrap core JavaScript -->
<script src="../static/vendor/jquery/jquery.min.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="../static/js/clean-blog.min.js"></script>
<script src="../static/vendor/jquery/jquery.cookie.js"></script>
<!-- 百度地图 -->
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=aoMy7jEDDfWfkVEwd2EvzsZ8gcHuzbqP"></script>
<script>
    function loadMap() {
        console.log('loadMap');
        var map = new BMapGL.Map('map-container'); // 创建Map实例
        map.centerAndZoom(new BMapGL.Point(112.558, 28.394), 12); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        map.addEventListener('click', function (e) {
            getAddressByLngLat(e.latlng.lng, e.latlng.lat);
        });


        var geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMapGL.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                console.log(r.point.lng, r.point.lat);
                getAddressByLngLat(r.point.lng, r.point.lat);
            }
            else {
                alert('failed' + this.getStatus());
            }
        });


        // 根据经纬度获取地址信息
        function getAddressByLngLat(lng, lat) {
            var geoc = new BMapGL.Geocoder();
            var point = new BMapGL.Point(lng, lat);
            geoc.getLocation(point, function(rs) {
                var addComp = rs.addressComponents;
                alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
                if(addComp.district)document.getElementById('region').value = addComp.district;
                if(addComp.street)document.getElementById('block').value = addComp.street;       // 街道
                if(addComp.street&&addComp.streetNumber)document.getElementById('address').value = addComp.street + addComp.streetNumber;
            })
        }
    }
</script>
<!-- change chanle -->
<script>

    // 删除浏览记录
    $("#del").on('click', function () {
        var $user_name = $.cookie('username');
        var $span = $(this);
        if ($user_name) {
            $.ajax({
                url: "/del_record",
                type: 'post',
                data: {
                    user_name: $user_name
                },
                success: function (resp) {
                    if (resp["valid"] == '1') {
                        $span.parent().next().remove();
                        alert(resp["msg"])
                    } else {
                        alert(resp["msg"])
                    }
                }
            })
        } else {
            alert('您还没有登录!');
        }
    });

    //  取消收藏
    $(".collect_off").on('click', function () {
        var $this = $(this);
        var houseId = $this.data('house-id');
        var name = $.cookie('username');

        if (!name) {
            alert('您还没有登录!');
            return;
        }

        $.ajax({
            url: "/user/collect_off",
            type: 'POST',
            data: {
                house_id: houseId,
                name: name
            },
            dataType: 'json',
            beforeSend: function () {
                $this.prop('disabled', true).text('处理中...');
            },
            success: function (resp) {
                if (resp.valid === '1') {
                    alert(resp.msg);
                    $this.closest('.collection-line').remove();
                } else {
                    alert(resp.msg);
                }
                // 恢复按钮状态
                $this.prop('disabled', false).text('取消收藏');
            },
            error: function () {
                alert('操作失败，请重试');
                $this.prop('disabled', false).text('取消收藏');
            }
        });
    });


    // 登出功能
    $("#logout").on('click', function () {
        $.ajax({
            url: '/logout',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res["valid"] == '1') {
                    alert(res["msg"]);
                    window.location.href = '/';
                } else {
                    alert(res["msg"]);
                }
            }
        })
    });

    $(".chanle1").on('click', function () {
        $('.user-info').show();
        $('.collection').hide();
        $('.upload-house').hide();
        $('.my-house').hide();
        $('.my-rent').hide();
        if ($('.chanle1').hasClass('action')) {
            $(".chanle1").removeClass('action');
        }
        $(".chanle1").addClass('action');
        $(".chanle2").removeClass('action');
        $(".chanle3").removeClass('action');
        $(".chanle4").removeClass('action');
        $(".chanle5").removeClass('action');
    });
    $(".chanle2").on('click', function () {
        $('.user-info').hide();
        $('.upload-house').hide();
        $('.my-house').hide();
        $('.my-rent').hide();
        $('.collection').show();
        $('.collection2').hide();
        $(".chanle1").removeClass('action');
        $(".chanle2").addClass('action')
        $(".chanle3").removeClass('action');
        $(".chanle4").removeClass('action');
        $(".chanle5").removeClass('action');
    });
    $(".chanle3").on('click', function () {
        $('.user-info').hide();
        $('.collection').hide();
        $('.upload-house').show();
        $('.my-house').hide();
        $('.my-rent').hide();
        $(".chanle1").removeClass('action');
        $(".chanle2").removeClass('action');
        $(".chanle3").addClass('action')
        $(".chanle4").removeClass('action');
        $(".chanle5").removeClass('action');
    })
    $(".chanle4").on('click', function () {
        // 获取用户上传的房源信息
        getMyHouses();

        $('.user-info').hide();
        $('.collection').hide();
        $('.upload-house').hide();
        $('.my-house').show();
        $('.my-rent').hide();
        $(".chanle1").removeClass('action');
        $(".chanle2").removeClass('action');
        $(".chanle3").removeClass('action')
        $(".chanle4").addClass('action');
        $(".chanle5").removeClass('action');
    })
    $(".chanle5").on('click', function () {

        getMyRentHouses();
        $('.user-info').hide();
        $('.collection').hide();
        $('.upload-house').hide();
        $('.my-house').hide();
        $('.my-rent').show();
        $(".chanle1").removeClass('action');
        $(".chanle2").removeClass('action');
        $(".chanle3").removeClass('action')
        $(".chanle4").removeClass('action');
        $(".chanle5").addClass('action');
    })
    // 修改用户名称的

    // 标志位
    var name_option = 1;
    // 获取原来的名字
    var y_name = $('#n-data').val();
    $("#btn-name").on('click', function () {
        if (name_option == 1) {

            $('.nkname').html('<input id="nkname" type="text" required placeholder="6-15位字母或数字">');
            $('#nkname').focus();
            $("#btn-name i").text(' 提交');
            name_option = 0
        } else {
            var j_data = {};
            var v_nkname = $('#nkname').val();
            if (5 < v_nkname.length < 16) {
                if (/[\u4e00-\u9fa5|a-zA-Z0-9]+$/.test(v_nkname)) {
                    j_data['name'] = v_nkname;
                    j_data['y_name'] = y_name

                } else {
                    alert('用户名需要6-15位字母或数字');
                    $('.nkname').html('<input id="nkname" type="text" required placeholder="6-15位字母或数字">');
                    $('#nkname').focus();
                    return
                }
            }

            $.ajax({
                url: "http://127.0.0.1:5000/modify/userinfo/name",
                type: 'post',
                dataType: 'json',
                data: j_data,
                success: function (data) {
                    if (data['ok'] === '1') {
                        alert('修改成功');
                        name_option = 1;
                        $('.nkname').html(v_nkname);
                        $("#btn-name i").text(' 编辑');
                        $('#n-data').attr('value', v_nkname);
                        window.location.href = '/user/' + v_nkname
                    } else {
                        alert(data['msg']);
                        $('#nkname').html(y_name);
                        $("#btn-name i").text(' 编辑');
                    }
                },
                error: function () {
                    alert('修改失败，请重试~');
                    $('#nkname').html(y_name);
                    $("#btn-name i").text(' 编辑');
                }

            });
        }

    });

    var addr_option = 1;
    var y_name = $('#n-data').val();
    var y_addr = $('#a-data').val();
    $("#btn-addr").on('click', function () {
        if (addr_option == 1) {

            $('.nkaddr').html('<input id="nkaddr" type="text" required placeholder="6-15位中文、字母或数字">');
            $('#nkaddr').focus();
            $("#btn-addr i").text(' 提交');
            addr_option = 0
        } else {
            var j_data = {};
            var v_nkaddr = $('#nkaddr').val();
            if (5 < v_nkaddr.length < 16) {
                if (/[\u4e00-\u9fa5|a-zA-Z0-9]+$/.test(v_nkaddr)) {
                    j_data['addr'] = v_nkaddr;
                    j_data['y_name'] = y_name

                } else {
                    alert('用户名需要6-15位字母或数字');
                    $('.nkaddr').html('<input id="nkaddr" type="text" required placeholder="6-15位中文、字母或数字">');
                    $('#nkaddr').focus();
                    return
                }
            }

            $.ajax({
                url: "http://127.0.0.1:5000/modify/userinfo/addr",
                type: 'post',
                dataType: 'json',
                data: j_data,
                success: function (data) {
                    if (data['ok'] == '1') {
                        alert('修改成功');
                        addr_option = 1;
                        $('.nkaddr').html(v_nkaddr);
                        $("#btn-addr i").text(' 编辑');
                        $('#a-data').attr('value', v_nkaddr)
                    } else {
                        alert('修改失败，请重试~');
                        $('#nkaddr').html(y_addr);
                        $("#btn-addr i").text(' 编辑');
                    }
                },
                error: function () {
                    alert('修改失败，请重试~');
                    $('#nkpd').html(y_addr);
                    $("#btn-pd i").text(' 编辑');
                }

            });
        }

    });

    var pd_option = 1;
    var y_name = $('#n-data').val();
    var y_pd = $('#p-data').val();
    $("#btn-pd").on('click', function () {
        if (pd_option == 1) {
            $('.nkpd').html('<input id="nkpd" type="text" required placeholder="6-15位字母或数字">');
            $('#nkpd').focus();
            $("#btn-pd i").text(' 提交');
            pd_option = 0
        } else {
            var j_data = {};
            var v_nkpd = $('#nkpd').val();
            if (5 < v_nkpd.length < 16) {
                if (/[a-zA-Z0-9]+$/.test(v_nkpd)) {
                    j_data['pd'] = v_nkpd;
                    j_data['y_name'] = y_name

                } else {
                    alert('用户名需要6-15位字母或数字');
                    $('.nkpd').html('<input id="nkpd" type="text" required placeholder="6-15位字母或数字">');
                    $('#nkpd').focus();
                    return
                }
            }

            $.ajax({
                url: "http://127.0.0.1:5000/modify/userinfo/password",
                type: 'post',
                dataType: 'json',
                data: j_data,
                success: function (data) {
                    if (data['ok']) {
                        alert('修改成功');
                        pd_option = 1;
                        $('.nkpd').html(v_nkpd);
                        $("#btn-pd i").text(' 编辑');
                        $('#p-data').attr('value', v_nkpd)
                    } else {
                        alert('修改失败，请重试~');
                        $('#nkpd').html(y_pd);
                        $("#btn-pd i").text(' 编辑');
                    }
                },
                error: function () {
                    alert('修改失败，请重试~');
                    $('#nkpd').html(y_pd);
                    $("#btn-pd i").text(' 编辑');
                }

            });
        }

    })

    var email_option = 1;
    var y_name = $('#n-data').val();
    var y_email = $('#e-data').val();
    $("#btn-email").on('click', function () {
        if (email_option == 1) {
            $('.nkemail').html('<input id="nkemail" type="text" required placeholder="邮箱格式错误！">');
            $('#nkemail').focus();
            $("#btn-email i").text(' 提交');
            email_option = 0
        } else {
            var j_data = {};
            var v_nkemail = $('#nkemail').val();
            if (5 < v_nkemail.length < 16) {
                if (v_nkemail.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
                    j_data['email'] = v_nkemail;
                    j_data['y_name'] = y_name

                } else {
                    alert('邮箱格式错误！');
                    $('.nkemail').html('<input id="nkemail" type="text" required placeholder="邮箱格式错误！">');
                    $('#nkemail').focus();
                    return
                }
            }

            $.ajax({
                url: "http://127.0.0.1:5000/modify/userinfo/email",
                type: 'post',
                dataType: 'json',
                data: j_data,
                success: function (data) {
                    if (data['ok']) {
                        alert('修改成功');
                        email_option = 1;
                        $('.nkemail').html(v_nkemail);
                        $("#btn-email i").text(' 编辑');
                        $('#e-data').attr('value', v_nkemail);
                    } else {
                        alert('修改失败，请重试~');
                        $('#nkemail').html(y_email);
                        $("#btn-email i").text(' 编辑');
                    }
                },
                error: function () {
                    alert('修改失败，请重试~');
                    $('#nkemail').html(y_email);
                    $("#btn-email i").text(' 编辑');
                }
            });
        }

    })

    $('#house-upload-form').submit(function(e) {
        e.preventDefault();
        var $form = $(this);
        var formData = {};
        $(this).serializeArray().forEach(function(item) {
            formData[item.name] = item.value;
        });
        var url = $form.attr('action'); // 获取当前表单的 action URL
        $.ajax({
            url: url,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            dataType: 'json',
            success: function(response) {
                console.log(response);
                if(response.valid === '1') {
                    alert(response.msg);
                    // 清空所有字段
                    $form[0].reset(); 
                    // 恢复标题
                    $('.upload-house > h3').text('上传房源信息');
                    // 恢复按钮文字
                    $form.find('button[type="submit"]').text('立即发布');
                    // 恢复 action 为新建房源的 URL
                    $form.attr('action', '/upload_house');
                    // 切换回“我的房源”页面
                    $(".chanle4").click();
                } else {
                    alert('失败' + response.msg);
                }
            },
            error: function() {
                alert('网络请求失败，请稍后重试');
            }
        });
    });

    function getMyHouses(){

        var name = $.cookie('username');
        if (name) {
            $.ajax({
                url: '/user/my_houses',
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    if (response.valid === '1') {
                        // 清空现有内容
                        $('.my-house').empty();
                        // 添加标题
                        $('.my-house').append('<h3 style="width: 100%; text-align: center;">我的房源</h3>');
                        // 动态生成房源卡片
                        var containerHtml = '<div class="row g-4">';  // 创建栅格容器
                        response.houses.forEach(function(house) {
                        const statusBadge = house.rent_status == 1 
                            ? '<div class="status-badge status-badge-rented">已租</div>' 
                            : '<div class="status-badge status-badge-available">未租</div>';
                        containerHtml += `
                            <div class="col-lg-6 col-md-6">
                                <div class="course h-100"
                                    data-id="${house.house_id}"
                                    data-title="${house.title}"
                                    data-rooms="${house.rooms}"
                                    data-area="${house.area}"
                                    data-price="${house.price}"
                                    data-direction="${house.direction}"
                                    data-rent_type="${house.rent_type}"
                                    data-region="${house.region}"
                                    data-block="${house.block}"
                                    data-address="${house.address}"
                                    data-traffic="${house.traffic}"
                                    data-facilities="${house.facilities}"
                                    data-highlights="${house.highlights}"
                                    data-matching="${house.matching}"
                                    data-travel="${house.travel}"
                                    data-phone_num="${house.phone_num}"
                                >
                                    <div class="ratio ratio-16x9">
                                        <a href="/house/${house.house_id}">
                                            <img class="img-fluid" src="../static/img/house-bg2.jpeg" alt="" style="object-fit: cover">
                                        </a>
                                        ${statusBadge}
                                    </div>
                                    <div class="course-info mt-2">
                                        <span class="glyphicon glyphicon-map-marker"></span>
                                        <span>${house.address}</span>
                                    </div>
                                    <div class="course-info1">
                                        <span>${house.rooms}-${house.area}</span>
                                        <span class="price">￥${house.price}&nbsp;</span>
                                    </div>
                                    <div class="text-center mt-2 pb-2">
                                        <button class="collect_off btn btn-xs btn-danger px-2 py-1 btn-edit-house">修改房源</button>
                                    </div>
                                </div>
                            </div>`;
                        });
                        containerHtml += '</div>';  // 关闭栅格容器
                        $('.my-house').append(containerHtml);
                    } else {
                        alert('获取房源失败');
                    }
                }
            })
        } else {
            alert('您还没有登录!');
        }
    }

$('.my-house').on('click', '.btn-edit-house', function(event) {
    event.preventDefault(); // 阻止按钮的任何默认行为

    // 1. 找到被点击按钮所在的卡片
    const $card = $(this).closest('.course');

    // 2. 从卡片的 data-* 属性中提取所有数据
    const houseData = {
        id: $card.data('id'),
        title: $card.data('title'),
        rooms: $card.data('rooms'),
        area: $card.data('area'),
        price: $card.data('price'),
        direction: $card.data('direction'),
        rent_type: $card.data('rent_type'),
        region: $card.data('region'),
        block: $card.data('block'),
        address: $card.data('address'),
        traffic: $card.data('traffic'),
        facilities: $card.data('facilities'),
        highlights: $card.data('highlights'),
        matching: $card.data('matching'),
        travel: $card.data('travel'),
        phone_num: $card.data('phone_num')
    };
        
    // 3. 将数据填充到表单中
    const $form = $('#house-upload-form');
    $form.find('input[name="house_id"]').val(houseData.id);
    $form.find('input[name="title"]').val(houseData.title);
    $form.find('input[name="rooms"]').val(houseData.rooms);
    $form.find('input[name="area"]').val(houseData.area);
    $form.find('input[name="price"]').val(houseData.price);
    $form.find('input[name="direction"]').val(houseData.direction);
    $form.find('input[name="rent_type"]').val(houseData.rent_type);
    $form.find('input[name="region"]').val(houseData.region);
    $form.find('input[name="block"]').val(houseData.block);
    $form.find('input[name="address"]').val(houseData.address);
    $form.find('input[name="traffic"]').val(houseData.traffic);
    $form.find('textarea[name="facilities"]').val(houseData.facilities);
    $form.find('textarea[name="highlights"]').val(houseData.highlights);
    $form.find('textarea[name="matching"]').val(houseData.matching);
    $form.find('textarea[name="travel"]').val(houseData.travel);
    $form.find('input[name="phone_num"]').val(houseData.phone_num);

    // 4. 更新表单的UI和提交行为，使其进入“编辑模式”
    // 更改表单标题
    $('.upload-house > h3').text('修改房源信息');
    // 更改提交按钮的文字
    $form.find('button[type="submit"]').text('保存修改');
    // 更改表单的 action URL，指向更新操作的后端路由
    $form.attr('action', '/update_house'); // 建议使用专门的更新路由

    // 5. 切换到编辑页面，方便用户编辑
    $(".chanle3").click();
});

// 续租功能
$(".collect_off:contains('点击续租')").on('click', function () {
    var $this = $(this);
    var houseId = $this.data('house-id');
    var name = $.cookie('username');

    if (!name) {
        alert('您还没有登录!');
        return;
    }

    // 检查是否已存在续租模态框，如果存在则移除
    if ($("#renewModal").length) {
        $("#renewModal").remove();
        $(".modal-backdrop").remove();
        $("body").removeClass("modal-open");
    }

    // 创建续租时长选择模态框
    var renewModal = `
        <div class="modal fade" id="renewModal" tabindex="-1" aria-labelledby="renewModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="renewModalLabel">选择续租时长</h5>
                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="renewMonths" class="form-label">请选择续租月份数</label>
                            <select id="renewMonths" class="form-select">
                                <option value="1">1个月</option>
                                <option value="3">3个月</option>
                                <option value="6">6个月</option>
                                <option value="12" selected>12个月</option>
                            </select>
                        </div>
                        <p class="text-muted">续租价格将根据您选择的时长计算</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button id="confirmRenew" data-house-id="${houseId}" class="btn btn-danger">确认续租</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    // 将模态框添加到页面
    $("body").append(renewModal);
    // 显示模态框
    $("#renewModal").modal("show");

    // 确认续租按钮点击事件
    $("#confirmRenew").on("click", function () {
        var selectedMonths = $("#renewMonths").val();
        var houseId = $(this).data("house-id");

        $.ajax({
            url: "/user/renew_rent",
            type: 'POST',
            data: {
                house_id: houseId,
                user_name: name,
                renew_months: selectedMonths
            },
            dataType: 'json',
            beforeSend: function () {
                $this.prop('disabled', true).text('处理中...');
                $("#renewModal").modal("hide");
            },
            success: function (resp) {
                if (resp.valid === '1') {
                    alert(resp.msg);
                    getMyRentHouses();
                } else {
                    alert(resp.msg);
                }
                // 恢复按钮状态
                $this.prop('disabled', false).text('点击续租');
                // 移除模态框和遮罩层
                removeModal();
            },
            error: function () {
                alert('续租操作失败，请重试');
                $this.prop('disabled', false).text('点击续租');
                // 移除模态框和遮罩层
                removeModal();
            }
        });
    });

    // 模态框隐藏事件处理
    $("#renewModal").on("hidden.bs.modal", function () {
        $(this).remove();
        $(".modal-backdrop").remove();
        $("body").removeClass("modal-open");
    });
});

// 辅助函数：移除模态框和遮罩层
function removeModal() {
    console.log("正在移除模态框...");
    $("#renewModal").remove();
    $(".modal-backdrop").remove();
    $("body").removeClass("modal-open");
}

// 获取我的租借记录
function getMyRentHouses() {
    var name = $.cookie('username');
    if (name) {
        $.ajax({
            url: '/user/my_rent',
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                console.log('响应数据:', response);

                if (response.valid === '1') {
                    $('.my-rent').empty();
                    $('.my-rent').append('<h3 style="width: 100%; text-align: center;">我的租借</h3>');

                    var containerHtml = '<div class="row-cols-2 g-1">';

                    if (response.houses && Array.isArray(response.houses)) {
                        response.houses.forEach(function (house) {
                            var title = house.house_title || '未命名房屋';
                            var address = house.house_address || '未知地址';
                            var startTime = house.rent_start_time;
                            var endTime = house.rent_end_time;
                            var totalPrice = house.total_price || '价格未知';
                            var currentTime = house.currentTime;

                            // 判断是否可以续租（当前时间在租期内）
                            var canRenew = endTime > currentTime;
                            var renewBtnText = canRenew? '点击续租' : '已过期';
                            var renewBtnClass = canRenew? 'collect_off btn btn-xs btn-danger px-2 py-1' : 'btn btn-xs btn-secondary px-2 py-1 disabled';

                            var statusLabel = endTime < currentTime?
                                '<span class="badge bg-danger ms-2">已结束</span>' :
                                '<span class="badge bg-success ms-2">进行中</span>';

                            containerHtml += `
                                <div class="col">
                                    <div class="collection-line card shadow rounded-3">
                                        <a href="/house/${house.house_id}" class="text-decoration-none text-dark">
                                            <div class="position-relative d-flex justify-content-center">
                                                <img src="/static/img/house-bg2.jpeg" class="img-fluid rounded-top-3" alt="房源图片" width="480" height="270">
                                            </div>
                                        </a>
                                        <div class="card-body p-4">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="glyphicon glyphicon-map-marker text-primary fs-5 me-2"></span>
                                                <h5 class="mb-0">
                                                    ${title.length > 30? title.slice(0, 30) + '...' : title}&nbsp;
                                                    ${statusLabel}
                                                </h5>
                                            </div>
                                            <div class="course-info1 text-muted">
                                                <div class="mb-1">${address}&nbsp;
                                                <span class="price mb-1">开始时间: ${startTime}</span>&nbsp;
                                                <span class="price mb-1">结束时间: ${endTime}</span></div>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span class="price mb-1">总花费: ￥${totalPrice}</span>
                                                    <button class="${renewBtnClass}" data-house-id="${house.house_id}">
                                                        ${renewBtnText}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;
                        });
                    } else {
                        containerHtml += '<div class="col"><div class="text-center py-5">暂无租借记录</div></div>';
                    }

                    containerHtml += '</div>';
                    $('.my-rent').append(containerHtml);

                    // 初始化续租按钮事件（已包含时长选择）
                    $(".collect_off:contains('点击续租')").on('click', function () {
                        var $this = $(this);
                        var houseId = $this.data('house-id');
                        var name = $.cookie('username');

                        if (!name) {
                            alert('您还没有登录!');
                            return;
                        }

                        // 检查是否已存在续租模态框，如果存在则移除
                        if ($("#renewModal").length) {
                            $("#renewModal").remove();
                            $(".modal-backdrop").remove();
                            $("body").removeClass("modal-open");
                        }

                        // 创建续租时长选择模态框
                        var renewModal = `
                            <div class="modal fade" id="renewModal" tabindex="-1" aria-labelledby="renewModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="renewModalLabel">选择续租时长</h5>
                                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label for="renewMonths" class="form-label">请选择续租月份数</label>
                                                <select id="renewMonths" class="form-select">
                                                    <option value="1">1个月</option>
                                                    <option value="3">3个月</option>
                                                    <option value="6">6个月</option>
                                                    <option value="12" selected>12个月</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                            <button id="confirmRenew" data-house-id="${houseId}" class="btn btn-danger">确认续租</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;

                        // 将模态框添加到页面
                        $("body").append(renewModal);
                        // 显示模态框
                        $("#renewModal").modal("show");

                        // 确认续租按钮点击事件
                        $("#confirmRenew").on("click", function () {
                            var selectedMonths = $("#renewMonths").val();
                            var houseId = $(this).data("house-id");

                            $.ajax({
                                url: "/user/renew_rent",
                                type: 'POST',
                                data: {
                                    house_id: houseId,
                                    user_name: name,
                                    renew_months: selectedMonths
                                },
                                dataType: 'json',
                                beforeSend: function () {
                                    $this.prop('disabled', true).text('处理中...');
                                    $("#renewModal").modal("hide");
                                },
                                success: function (resp) {
                                    if (resp.valid === '1') {
                                        alert(resp.msg);
                                        getMyRentHouses();
                                    } else {
                                        alert(resp.msg);
                                    }
                                    $this.prop('disabled', false).text('点击续租');
                                    // 移除模态框和遮罩层
                                    removeModal();
                                },
                                error: function () {
                                    alert('续租操作失败，请重试');
                                    $this.prop('disabled', false).text('点击续租');
                                    // 移除模态框和遮罩层
                                    removeModal();
                                }
                            });
                        });

                        // 模态框隐藏事件处理
                        $("#renewModal").on("hidden.bs.modal", function () {
                            $(this).remove();
                            $(".modal-backdrop").remove();
                            $("body").removeClass("modal-open");
                        });
                    });
                } else {
                    alert('获取租借记录失败：' + response.msg);
                }
            },
            error: function () {
                alert('网络请求失败，请重试');
            }
        });
    } else {
        alert('您还没有登录!');
    }
}
</script>



</body></html>